<template>
  <el-card class="box-card">
    <!-- 查询条件-->
    <el-row :gutter="20">
    </el-row>
    <br />
    <el-row :gutter="20">
      <el-col :span="8">
      </el-col>
      <el-col :span="8">
        <el-button type="primary" icon="el-icon-house" @click="back()">返回主页</el-button>
      </el-col>
    </el-row>

    <el-form  ref="form" :model="form" label-width="80px"  :rules="rules"  >
      <el-form-item prop="name" label="公司名" width="100">
        <el-input  v-model="form.name" />
      </el-form-item>
      <el-form-item prop="title" label="网站标题" width="100">
        <el-input  v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item prop="logo" label="公司商标" width="100" height="100px">
        <el-upload class="avatar-uploader btnCls"
                   action="http://127.0.0.1:8089/admin/systemCtl/logosuplaod"
                   :show-file-list="false"
                   :on-success="handleAvatarSuccess"
                   :headers="{adminToken:adminToken}">
          <div style="height: 100px">
            <img :src= "servePath + form.logo" width="100" height="100">
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item prop="phone" label="公司电话" width="100">
        <el-input  v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item prop="address" label="公司地址" width="100">
        <el-input  v-model="form.address"></el-input>
      </el-form-item>
      <el-form-item prop="noteid" label="备案号" width="100">
        <el-input  v-model="form.noteid"></el-input>
      </el-form-item>
      <el-form-item label="操作" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini"  @click="save('form')">保存</el-button>
        </template>
      </el-form-item>
    </el-form>

  </el-card>
</template>

<script>
export default {
  data() {
    return {
      adminToken:"",
      imageUrl:"",
      form:{
        logo:"",
        name:'',
        title:"",
        phone:'',
        address:"",
        noteid:''
      },
      servePath:'http://127.0.0.1:8088/',
      total:0,
      rules: {
        name: [
          { required: true, message: '公司名不能为空', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符~', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '网站标题不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符~', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请填写电话', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符~', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请填写地址', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符~', trigger: 'blur' }
        ],
        noteid: [
          { required: true, message: '请填写备案号', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符~', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.query();
    },
    /*保存*/
    save(form){
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$confirm('此操作将保存数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http.post("admin/systemCtl/save", this.form).then((resp) => {
              if (resp.data.code == 200) {
                this.$message({
                  showClose: true,
                  message: '恭喜你，保存成功✔',
                  type: 'success'
                });
                //更新页面
                this.$router.go();
              }
            })
          });
        }else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    addRole() {
      this.$refs.add.dialogVisible= true;
    },
    back() {
      this.$router.go();
    },
    query() {
      this.$http.post("admin/systemCtl/list", this.form).then((resp) => {
        this.form=resp.data.data;
        this.form.logo=resp.data.data.logo;
      })
      this.adminToken=sessionStorage.getItem("adminToken");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.form.pageSize=val;
      this.form.pageNum=1;
      this.query();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.form.pageNum=val;
      this.query();
    }
  },
  mounted() {
    this.query();
  }
}
</script>

<style>

</style>